<template>
	<view class="createQd" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="创建" :isAppBtn="false"></HeadCustom>
		<view class="back_color banner_box fboxRow">
			<!-- <text class="font30">Banner：</text> -->
			<view class="fboxCol Xcenter Ycenter">
				<view class="img_box fboxRow Xcenter Ycenter" @tap="slectImg">
					<image v-show="!detailData.themeBanner" class="add-pic"
						src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/addImg.png" mode="widthFix"></image>
					<image v-show="detailData.themeBanner" :src="detailData.themeBanner" class="banner_img"
						mode="aspectFill"></image>
				</view>
				<text class="font20">注：建议图片尺寸750px*485px，支持jpg、png格式.</text>
			</view>
		</view>

		<view class="qdMsg back_color">
			<u--form :labelWidth="labelWidth" :labelStyle="{ color: '#F7F9FF ' }" labelPosition="left" ref="uForm">
				<!-- labelWidth="80" -->
				<u-form-item :labelWidth="labelWidth" v-for="(item, index) in form" :key="index" :label="item.mc"
					:class="{ addressBox: item.lx == 'map' }">
					<u--input :type="item.iptType" :maxlength="item.length" v-if="item.lx == 'input'"
						:readonly="item.disabled" placeholderStyle="font-size:26rpx" placeholderClass="inputPlaceholder"
						:placeholder="item.placeholder" v-model="detailData[item.type]" border="none" clearable
						@focus="focus"></u--input>
					<view class="date_box font26" style="line-height: 48rpx;" v-else-if="item.lx == 'map'">
						<!-- <span v-if="!detailData.address" style="color: #6B707C;">{{ item.placeholder }}</span>
						<span class="font-ell2" style="color:#fff" v-else>{{ detailData.address }}</span> -->
						<!-- <u--input
							:maxlength="item.length"
							:readonly="item.disabled"
							placeholderStyle="font-size:26rpx"
							placeholder="请设置地址信息"
							v-model="detailData.address"
							border="none"
							clearable
						></u--input> -->
						<uni-easyinput :inputBorder="false" type="textarea" :readonly="item.disabled" autoHeight
							v-model="detailData.address" placeholder="请设置地址信息"></uni-easyinput>
					</view>

					<view class="date_box" v-else-if="item.lx == 'date'">
						<uni-datetime-picker type="datetimerange" :clear-icon="false" start-placeholder="开始时间"
							end-placeholder="截止时间" :start="datetimeData" :border="false" :value="detailData.gmtTime"
							@change="changeTime($event, 'gmtTime')" />
					</view>
					<image v-if="item.icon" style="width:30rpx" class="add_right" :src="item.icon" mode="widthFix"
						@tap="goSelectMap(item.lx)"></image>
				</u-form-item>
			</u--form>
		</view>
		<view class="meetingContent back_color">
			<view class="meetingTop">
				<text class="content_js">活动内容</text>
				<text class="editTxt" @tap="editContent">编辑</text>
			</view>
			<view class="content" v-if="detailData.content && detailData.content.length != 0">
				<view v-for="(item, index) in detailData.content" :key="item.segContent">
					<view class="mar10 text_box font32" style="white-space: pre-wrap;" v-if="item.type == 'text'"
						v-html="item.segContent"></view>
					<image class="mar10" v-else-if="item.type == 'image'" :src="item.segContent" mode="widthFix"
						@click="picPreview(item.segContent, 1)"></image>
					<video class="mar10" :show-fullscreen-btn="false" v-else :src="item.segContent"
						:poster="item.mpc_url"></video>
				</view>
			</view>
		</view>
		<view class="back_color fboxCol">
			<text class="font32 cyfs">用户参与方式</text>
			<view class="fboxRow Ycenter flex1 mt32">
				<view class="flex1 fboxRow Ycenter" v-for="(fs, index) in yhcyData" :key="index" @tap="changeYhfs(fs)">
					<image v-if="fs.isClick" class="selectImg"
						src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/selectFs1.png" mode="aspectFill"></image>
					<image v-else class="selectImg" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/selectFs2.png"
						mode="aspectFill"></image>
					<text class="font26 cyfs-name">{{ fs.name }}</text>
				</view>
			</view>
		</view>
		<view class="meetingContent back_color" v-if="detailData.cyfsMode !== 1">
			<view class="meetingTop">
				<text class="content_js">报名字段</text>
				<text class="editTxt" @tap="addBmzd">添加</text>
			</view>
			<view class="bmzd">
				<view v-for="(item, index) in bmzdList" :key="index" :class="{ back_000: index + 1 > 2 }">
					{{ item.name }}
					<view class="" style="float: right;" v-if="index + 1 > 2">
						<text @tap="edteBmzd(item)" class="bwfont bw-bianji img_edit"
							style="margin-right: 30rpx;"></text>
						<text @tap="delBmzd(item)" class="bwfont bw-shanchu1 img_edit"></text>

						<!-- <image @tap="edteBmzd(item)" style="margin-right: 30rpx;" class="img_edit" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/edit6.png" mode=""></image>
						<image @tap="delBmzd(index)" class="img_edit" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/del8.png" mode=""></image> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 报名时间 -->
		<view class="bmsj back_color" v-if="detailData.cyfsMode !== 1">
			<text class="font30 cyfs">{{detailData.cyfsMode == 2 ? '报名/签到时间' : '报名时间'}}</text>
			<view class="flex1">
				<span @click="openTips('bmsj')" v-if="detailData.gmtTime.length == 0" class="cyfs-name"
					style="font-size: 28rpx;">开始时间 - 结束时间</span>
				<uni-datetime-picker v-else type="datetimerange" :clear-icon="false" :start="datetimeData"
					:border="false" :end="gmtApply.end" :value="detailData.gmtApplyTime"
					@change="changeTime($event, 'gmtApplyTime')" />
			</view>
			<image @click="openTips('bmsj')" v-if="detailData.gmtTime.length == 0 && detailData.cyfsMode == 0"
				class="add_right add_right1" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/date_icon.png"
				mode="widthFix"></image>
		</view>
		<!-- 签到时间 -->
		<view class="bmsj back_color" v-if="detailData.cyfsMode !== 2">
			<text class="font30 cyfs">签到时间</text>
			<view class="flex1">
				<uni-datetime-picker
					v-if="detailData.gmtApplyTime.length != 0 || (detailData.cyfsMode && detailData.gmtTime.length != 0)"
					@clear="clearTimer" type="datetimerange" :clear-icon="false" :start="gmtSign.start"
					:end="gmtSign.end" :border="false" :value="detailData.gmtSignTime"
					@change="changeTime($event, 'gmtSignTime')" />
				<span @click="openTips('qdsj')" v-else class="cyfs-name" style="font-size: 28rpx;">开始时间 - 结束时间</span>
			</view>
			<image @click="openTips('qdsj')" v-if="detailData.gmtApplyTime.length == 0" class="add_right add_right1"
				src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/date_icon.png" mode="widthFix"></image>
		</view>

		<view class="bmsj back_color" style="margin-bottom: 36rpx;">
			<text class="font30 cyfs">签到方式</text>
			<view class="fboxRow Ycenter flex1">
				<view class="flex1 fboxRow Ycenter" v-for="(fs, index) in qdfsData" :key="index" @tap="changeQdfs(fs)">
					<!-- https://ebc-prod.cdn.benwunet.com/uni-static/h5/selectFs2.png -->
					<image v-if="fs.isClick" class="selectImg"
						src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/selectFs1.png" mode="aspectFill"></image>
					<image v-else class="selectImg" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/selectFs2.png"
						mode="aspectFill"></image>
					<text class="font26 cyfs-name">{{ fs.name }}</text>
				</view>
			</view>
		</view>

		<BottomBtn :backColor="backBtnColor" :style="{ '--backBtn': backBtnColor }">
			<template>
				<view class="btn_box fboxRow">
					<view class="flex1" style="margin-right: 20rpx;" @tap="viewBwqData">预览</view>
					<view class="flex1" @tap="submit">确定并提交审核</view>
				</view>
			</template>
		</BottomBtn>
	</view>
</template>

<script>
	import {
		fileUploadAnon
	} from '@/api/index.js';
	import BottomBtn from '@/components/bottom-btn/fixed.vue';
	import { debounce } from '@/static/js/common.js';
	import {
		conferenceAddOrEdit,
		conferenceAddOrEditDirectSign,
		conferenceAddOrEditNoSign,
		conferenceDetailForOrg,
		groupAddOrEdit,
		groupAddOrEditDirectSign,
		groupAddOrEditNoSign
	} from '@/api/h5.js';
	export default {
		components: {
			BottomBtn
		},
		data() {
			return {
				theme: getApp().globalData.appTheme,
				globalColor: getApp().globalData.globalColor,
				func: null,
				groupId: '',
				datetimeData: '',
				gmtApply: {
					start: '',
					end: ''
				},
				gmtSign: {
					start: '',
					end: ''
				},
				qdfsData: [{
						name: '线上签到',
						isClick: true,
						id: 0
					},
					{
						name: '线下扫码签到',
						isClick: false,
						id: 1
					}
				],
				yhcyData: [{
						name: '报名签到',
						isClick: true,
						id: 0
					},
					{
						name: '只需签到',
						isClick: false,
						id: 1
					},
					{
						name: '报名即签到',
						isClick: false,
						id: 2
					}
				],
				form: [{
						mc: '主题',
						type: 'themeName',
						lx: 'input',
						length: -1,
						placeholder: '请输入主题名称'
					},
					{
						mc: '时间',
						type: 'time',
						lx: 'date',
						disabled: true,
						icon: '',
						placeholder: '开始时间 -- 截止时间'
					},
					{
						mc: '地址',
						type: 'address',
						lx: 'map',
						icon: 'https://ebc-prod.cdn.benwunet.com/uni-static/h5/address.png',
						placeholder: '请设置地址信息'
					},
					{
						mc: '联系方式',
						type: 'contact',
						lx: 'input',
						iptType: 'number',
						length: 11,
						placeholder: '请输入联系电话'
					},
					{
						mc: '主办方',
						type: 'sponsors',
						lx: 'input',
						length: -1,
						placeholder: '请输入主办方名称'
					},
					{
						mc: '承办方',
						type: 'organizers',
						lx: 'input',
						length: -1,
						placeholder: '请输入承办方名称（非必填）'
					}
				],
				detailData: {
					applyFields: [],
					themeBanner: '',
					signMode: 0,
					cyfsMode: 0,
					gmtTime: [],
					gmtSignTime: [],
					gmtApplyTime: [],
					content: []
				},
				// 创建会议时检查必填项(按照顺序----)
				checkData: [{
						name: 'Banner图',
						value: 'themeBanner',
						required: true
					},
					{
						name: '主题',
						value: 'themeName',
						required: true
					},
					{
						name: '会议时间',
						value: 'gmtStart',
						required: true
					},
					{
						name: '会议时间',
						value: 'gmtEnd',
						required: true
					},
					{
						name: '地址',
						value: 'address',
						required: true
					},
					{
						name: '联系方式',
						value: 'contact',
						required: true
					},
					{
						name: '主办方',
						value: 'sponsors',
						required: true
					},
					{
						name: '承办方',
						value: 'organizers',
						required: false
					},
					{
						name: '活动内容',
						value: 'content',
						required: true
					},
					{
						name: '报名字段',
						value: 'applyFields',
						required: true
					},
					{
						name: '报名时间',
						value: 'gmtApplyStart',
						required: true
					},
					{
						name: '报名时间',
						value: 'gmtApplyEnd',
						required: true
					},
					{
						name: '签到时间',
						value: 'gmtSignStart',
						required: true
					},
					{
						name: '签到时间',
						value: 'gmtSignEnd',
						required: true
					},
					{
						name: '签到方式',
						value: 'signMode',
						required: false
					}
				],
				bmzdList: [{
						name: '姓名',
						type: 'fill',
						required: 'true',
						attribute: 'text',
						length: 10
					},
					{
						name: '电话',
						type: 'fill',
						required: 'true',
						attribute: 'number',
						length: 11
					}
				],
				backBtnColor: '',
				labelWidth: 80
			};
		},
		watch: {
			globalColor: {
				handler(newVal) {
					if (newVal) {
						this.backBtnColor = newVal['bottomPopupBackTwoColor'];
					}
				},
				deep: true,
				immediate: true
			}
		},
		onShow() {
			const w = uni.getSystemInfoSync().screenWidth;
			if (w > 780) {
				this.labelWidth = 140;
			} else {
				this.labelWidth = 80;
			}
			const adressObj = getApp().globalData.recruitmentTemp;
			if (adressObj.workAddress) {
				this.$set(this.detailData, 'address', adressObj.workAddress);
				this.detailData.latitude = adressObj.latitude;
				this.detailData.longitude = adressObj.longitude;
			}
		},
		onLoad(option) {
			this.platId = getApp().globalData.companyId;
			let date = new Date();
			this.datetimeData = date.getTime();
			if (option.conferenceId) {
				const obj = getApp().globalData.createBwqDetail;
				if (Object.keys(obj).length != 0) {
					this.detailData = obj;
					if (obj.applyFields) {
						this.bmzdList = obj.applyFields;
					}
				} else {
					this.getDetail(option.conferenceId);
				}
			} else {
				const obj = getApp().globalData.createBwqDetail;
				if (Object.keys(obj).length != 0) {
					this.detailData = obj;
					this.initYhcyfs(this.detailData.cyfsMode);
					if (obj.applyFields) {
						this.bmzdList = obj.applyFields;
					}
				}
			}
			if (getApp().globalData.gmtApply) {
				this.gmtApply = getApp().globalData.gmtApply;
				this.gmtApply.start = this.gmtApply.start.replaceAll('.', '-');
				this.gmtApply.end = this.gmtApply.end.replaceAll('.', '-');
			}
			if (getApp().globalData.gmtSign) {
				this.gmtSign = getApp().globalData.gmtSign;
				this.gmtSign.start = this.gmtSign.start.replaceAll('.', '-');
				this.gmtSign.end = this.gmtSign.end.replaceAll('.', '-');
			}
			if (option.groupId) {
				this.groupId = option.groupId;
			}
		},
		mounted() {
			// #ifdef H5
			window.appFileCallback = this.appFileCallback;
			// #endif
		},
		methods: {
			// 页面加载初始化 用户参与方式
			initYhcyfs(id) {
				this.yhcyData.forEach(item => {
					if (item.id == id) {
						item.isClick = true;
					} else {
						item.isClick = false;
					}
				});
			},
			changeQdfs(data) {
				if (data.isClick) {
					return;
				}
				this.qdfsData.forEach(item => {
					if (!item.isClick) {
						item.isClick = true;
						this.detailData.signMode = item.id;
					} else {
						item.isClick = false;
					}
				});
			},
			focus() { //获取焦点的时候进行触发
				console.log('focus')
				console.log('document.activeElement.tagName', document.activeElement.tagName)
				let platform = uni.getSystemInfoSync().platform
				if (document.activeElement.tagName == 'INPUT' && platform == 'android') {


					console.log('window.setTimeout')
					// document.activeElement.scrollIntoView();
					uni.pageScrollTo({
						scrollTop: 200, //滚动的距离
						duration: 10, //过渡时间
					})

				}
				// window.addEventListener('resize', () => {


				// })
			},
			
			changeYhfs(data) {
				if (data.isClick) {
					return;
				}
				this.yhcyData.forEach((item, i) => {
					if (data.id == item.id) {
						item.isClick = true
						this.detailData.cyfsMode = item.id;
						if (item.id) {
							// 只需签到 --- 签到时间时间禁用
							this.gmtSign.start = this.detailData.gmtTime[0] ? this.detailData.gmtTime[0]
								.replaceAll('.', '-') : '';
							this.gmtSign.end = this.detailData.gmtTime[1] ? this.detailData.gmtTime[1].replaceAll(
								'.', '-') : '';
						} else {
							// 报名+签到 --- 签到时间时间禁用
							this.gmtSign.start = this.detailData.gmtApplyTime[0] ? this.detailData.gmtApplyTime[0]
								.replaceAll('.', '-') : '';
							this.gmtSign.end = this.detailData.gmtTime[1] ? this.detailData.gmtTime[1].replaceAll(
								'.', '-') : '';
						}
						this.detailData.gmtApplyTime = [];
						this.detailData.gmtSignTime = [];
					} else {
						item.isClick = false
					}
				})
			},
			// 查看图片
			picPreview(urls, index) {
				uni.previewImage({
					urls: [urls],
					current: index
				});
			},
			// 时间提示
			openTips(type) {
				if (type == 'bmsj') {
					uni.showToast({
						title: '请先选择活动时间',
						icon: 'none'
					});
				} else {
					if (this.detailData.cyfsMode) {
						uni.showToast({
							title: '请先选择活动时间',
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: '请先选择报名时间',
							icon: 'none'
						});
					}
				}
			},
			changeTime(data, type) {
				if (type == 'gmtTime') {
					// 报名
					this.gmtApply.end = data[1].replaceAll('.', '-');
					// 签到结束时间
					this.gmtSign.end = data[1].replaceAll('.', '-');
					// 签到开始时间
					this.gmtSign.start = data[0].replaceAll('.', '-');
				}
				// 选择报名时间
				if (type == 'gmtApplyTime') {
					this.gmtSign.start = data[0].replaceAll('.', '-');
				}
				this.saveTime();
				this.detailData[type] = data;
				console.log('this.gmtApply====>', this.gmtApply);
				console.log('this.gmtSign====>', this.gmtSign);
			},
			saveTime() {
				getApp().globalData.gmtApply = this.gmtApply;
				getApp().globalData.gmtSign = this.gmtSign;
			},
			// 编辑时获取详情数据
			getDetail(id) {
				uni.showLoading({
					mask: true,
					title: '加载中...'
				});
				conferenceDetailForOrg({
						conferenceId: id
					})
					.then(res => {
						if (res.data) {
							this.detailData = res.data;
							this.bmzdList = JSON.parse(res.data.applyFields);
							this.detailData.content = JSON.parse(res.data.content);
							this.detailData.gmtTime = [this.detailData.gmtStart, this.detailData.gmtEnd];
							this.detailData.gmtSignTime = [this.detailData.gmtSignStart, this.detailData.gmtSignEnd];
							this.detailData.gmtApplyTime = [this.detailData.gmtApplyStart, this.detailData
								.gmtApplyEnd
							];
							// 时间禁用
							this.gmtApply = {
								start: this.detailData.gmtStart,
								end: this.detailData.gmtEnd
							};
							this.gmtSign = {
								start: this.detailData.gmtApplyStart,
								end: this.detailData.gmtEnd
							};
							this.saveDetailData();
						}
					})
					.finally(() => {
						uni.hideLoading();
					});
			},
			// 选择位置
			goSelectMap(type) {
				if (type != 'map') {
					return;
				}
				this.saveDetailData();
				this.saveTime();
				this.$pageTo('/bwSign/map');
			},
			// 编辑内容
			editContent() {
				this.saveDetailData();
				this.saveTime();
				this.$pageTo('/bwSign/contentEdit');
			},
			// 删除报名字段
			delBmzd(id) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认删除该条数据？',
					success: function(res) {
						if (res.confirm) {
							that.bmzdList.splice(id, 1);
							that.saveDetailData();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 编辑报名字段
			edteBmzd(data) {
				this.saveTime();
				this.$pageTo('/bwSign/addBmzd?name=' + data.name);
			},
			submit: debounce(function() {
				const obj = JSON.parse(JSON.stringify(this.detailData));
				obj.content = JSON.stringify(obj.content);
				obj.applyFields = JSON.stringify(obj.applyFields);
				obj.platId = getApp().globalData.companyId;
				obj.gmtStart = obj.gmtTime[0] ? obj.gmtTime[0].replaceAll('.', '-') : '';
				obj.gmtEnd = obj.gmtTime[1] ? obj.gmtTime[1].replaceAll('.', '-') : '';
				obj.gmtSignStart = obj.gmtSignTime[0] ? obj.gmtSignTime[0].replaceAll('.', '-') : '';
				obj.gmtSignEnd = obj.gmtSignTime[1] ? obj.gmtSignTime[1].replaceAll('.', '-') : '';
				obj.gmtApplyStart = obj.gmtApplyTime[0] ? obj.gmtApplyTime[0].replaceAll('.', '-') : '';
				obj.gmtApplyEnd = obj.gmtApplyTime[1] ? obj.gmtApplyTime[1].replaceAll('.', '-') : '';
				let flag = false;
				this.checkData.find(item => {
					if (item.required && !obj[item.value]) {
						if (this.detailData.cyfsMode == 1 && (item.name == '报名时间' || item.name ==
								'报名字段')) {
							return;
						}
						if (this.detailData.cyfsMode == 2 && item.name == '签到时间') {
							return;
						}
						console.log(item, `请完善${item.name}信息`, obj[item.value])
						uni.showToast({
							title: `请完善${item.name}信息`,
							icon: 'none'
						});
						flag = true;
						return flag;
					}
				});
				if (flag) {
					return;
				}
				uni.showLoading({
					mask: true,
					title: '创建中...'
				});
				let url = '';
				if (this.groupId) {
					// 圈子 创建本无签
					obj.groupId = this.groupId;
					if (this.detailData.cyfsMode == 2) {
						// 用户参与方式 -- 报名即签到
						url = groupAddOrEditNoSign
					} else if (this.detailData.cyfsMode == 1) {
						// 用户参与方式 -- 只需签到
						url = groupAddOrEditDirectSign;
					} else {
						url = groupAddOrEdit;
					}
				} else {
					// 正常企业创建本无签
					if (this.detailData.cyfsMode == 2) {
						// 用户参与方式 -- 报名即签到
						url = conferenceAddOrEditNoSign
					} else if (this.detailData.cyfsMode == 1) {
						// 用户参与方式 -- 只需签到
						url = conferenceAddOrEditDirectSign;
					} else {
						url = conferenceAddOrEdit;
					}
				}
				url(obj)
					.then(res => {
						if (res.data) {
							uni.showToast({
								title: '创建成功',
								icon: 'none'
							});
							uni.navigateBack({
								delta: 1
							});
							getApp().globalData.createBwqDetail = {};
							getApp().globalData.gmtApply = {};
							getApp().globalData.gmtSign = {};
						}
					})
					.finally(() => {
						uni.hideLoading();
					});
			}, 1000),
			// 预览创建数据
			viewBwqData() {
				this.detailData.gmtStart = this.detailData.gmtTime[0];
				this.detailData.gmtEnd = this.detailData.gmtTime[1];
				this.detailData.gmtSignStart = this.detailData.gmtSignTime[0];
				this.detailData.gmtSignEnd = this.detailData.gmtSignTime[1];
				this.detailData.gmtApplyStart = this.detailData.gmtApplyTime[0];
				this.detailData.gmtApplyEnd = this.detailData.gmtApplyTime[1];
				this.saveDetailData();
				this.saveTime();
				this.$pageTo('/bwSign/qdDetail?type=' + 'company');
			},
			// 存储数据
			saveDetailData() {
				this.detailData.applyFields = this.bmzdList;
				getApp().globalData.createBwqDetail = this.detailData;
				console.log('this.detailData==============>', this.detailData);
			},
			// 添加报名字段
			addBmzd() {
				this.saveDetailData();
				this.saveTime();
				this.$pageTo('/bwSign/addBmzd');
			},
			appFileCallback(res) {
				const obj = res;
				if (obj.action == 'themeBanner') {
					this.detailData.themeBanner = obj.fileUrl;
				}
			},
			// Banner图上传
			slectImg() {
				const that = this;
				let u = navigator.userAgent;
				if (!/(iPhone|iPad|iPod|iOS)/i.test(u)) {
					const data = {
						type: 'imgUpload',
						action: 'themeBanner'
					};
					this.$bridge.callHandler('recruitHandler', data, () => {
						console.log('recruitHandler', '返回');
					});
				} else {
					let that = this;
					const data = {
						type: 'imgUpload',
						action: 'themeBanner'
					};
					this.$bridge.callHandler('recruitHandler', data, res => {
						console.log('recruitHandler  ', '返回');
						that.appFileCallback(res);
					});
					return;
					uni.chooseFile({
						count: 1, //默认9
						// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						type: 'image',
						sourceType: ['album'], //从相册选择
						extension: ['.png', '.jpg', '.bmp', '.webp'],
						success: async function(res) {
							uni.showLoading({
								mask: true,
								title: '上传中...'
							});
							const file = res.tempFiles[0];
							file.url = file.path;
							console.log('============================>', file.size);
							const imgType = ['image/jpeg', 'image/png', 'image/webp', 'image/bmp'];
							if (!imgType.includes(file.type)) {
								uni.showToast({
									title: '上传图片类型不符合',
									icon: 'none'
								});
								uni.hideLoading();
								return;
							}
							// 限制图片不大于5M
							if (file.size > 1024 * 1024 * 50) {
								uni.showToast({
									title: '上传图片大小不能超过50M',
									icon: 'none'
								});
								uni.hideLoading();
								return;
							}
							await fileUploadAnon(file)
								.then(res => {
									if (res.data) {
										that.detailData.themeBanner = res.data.url;
									}
								})
								.finally(() => {
									uni.hideLoading();
								});
						}
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	// 当屏幕宽高比小于13/20时 样式生效
	@media (min-aspect-ratio: 13/20) {
		.showBtn {
			display: none;
		}
	}

	// 横屏 显示页面底部按钮
	@media screen and (orientation: landscape) {
		.showBtn {
			display: block;
		}
	}

	::v-deep .u-form-item__body {
		padding: 20rpx 0;
	}

	::v-deep .addressBox {
		.u-form-item__body__left {
			display: block;
			padding-top: 7rpx;
		}
	}

	.add_right {
		width: 24rpx;
	}

	::v-deep .uni-easyinput__content {
		background-color: unset !important;
	}

	::v-deep .uni-easyinput__content-textarea {
		height: auto !important;
		min-height: unset !important;
		margin: -1rpx 0 0 0 !important;

		.uni-textarea-wrapper {
			min-height: 35rpx !important;
			bottom: -6rpx;
		}

		.uni-textarea-placeholder {
			color: var(--contentFontFourColor);
			font-size: 24rpx;
		}

		.uni-textarea-textarea {
			color: var(--contentFontDarkColor);
			font-size: 24rpx;
			bottom: -6rpx;
		}
	}

	::v-deep .uni-input-input {
		color: var(--contentFontDarkColor);
		font-size: 26rpx;
		bottom: -6rpx;
	}

	::v-deep .u-form-item__body__left__content__label {
		color: var(--titleFontColor) !important;
		font-size: 30rpx !important;
		text-align: justify;

		>span {
			width: 100%;
			font-weight: 600;
			height: 28rpx;
			margin-right: 10rpx;

			&::after {
				content: '';
				width: 100%;
				display: inline-block;
			}
		}
	}

	::v-deep .uni-input-placeholder {
		color: var(--contentFontFourColor);
		font-size: 24rpx;
		bottom: -6rpx;
	}

	::v-deep .uni-date-range {
		background-color: transparent !important;
		color: var(--contentFontFourColor);
		position: relative;
		bottom: -6rpx;

		.uni-date__x-input {
			padding-left: 0;
			font-size: 26rpx;
		}
	}

	::v-deep .value_text {
		color: var(--contentFontDarkColor);
	}

	.selectImg {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
		flex-shrink: 0;
	}

	.back_000 {
		background: #fff !important;
		border: 1px solid #e0e5e8;
		color: var(--contentFontDarkColor) !important;
	}

	.u-form-item {
		border-bottom: 1rpx solid var(--viewDivisionColor);
	}

	.back_color {
		background-color: var(--viewBgColor);
		padding: 40rpx;
		margin-top: 20rpx;
		border-radius: 12rpx;
	}

	.date_box {
		width: 100%;
		color: grey;
	}

	.cyfs {
		color: var(--titleFontColor);
		font-weight: 600;

		.cyfs-name {
			color: var(--contentFontDarkColor);
		}
	}

	.createQd {
		padding: 24rpx;
		padding-top: 0;

		.qdMsg {}

		.btn_box {
			width: 100%;
			align-items: center;
			justify-content: center;

			>view {
				height: 76rpx;
				padding: 24rpx 40rpx;
				text-align: center;

				&:first-child {
					// box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.16);
					border-radius: 8rpx;
					border: 2rpx solid var(--buttonOutlineOneColor);
					color: var(--contourButtonTextColor);
				}

				&:last-child {
					background: linear-gradient(360deg, var(--rampButtonBackEndColor) 0%, var(--rampButtonBackStartColor) 100%);
					// box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.16);
					border-radius: 8rpx;
					color: var(--buttonTextColor);
				}
			}
		}

		.bmsj {
			display: flex;
			position: relative;
			align-items: center;

			view {
				color: #6b707c;
				font-size: 26rpx;
				// height: 62rpx;
			}

			.add_right1 {
				position: absolute;
				right: 40rpx;
			}

			>text {
				padding-right: 25rpx;
				padding-bottom: 6rpx;
			}
		}

		.meetingContent {
			.content {
				// background-color: var(--controllerBgColor);
				border-radius: 8rpx;
				padding: 20rpx;

				.text_box {
					font-weight: 400;
					color: var(--contentFontDarkColor);
					line-height: 44rpx;
				}

				.mar10 {
					margin: 10rpx 0;
					width: 100%;
				}
			}

			.bmzd {
				>view {
					height: 90rpx;
					border-radius: 8rpx;
					background-color: var(--bottomPopupBackTwoColor);
					margin-top: 20rpx;
					padding: 30rpx;
					color: var(--contentFontFourColor);

					.img_edit {
						width: 28rpx;
						height: 28rpx;
						color: var(--titleFontColor);
					}
				}
			}

			.meetingTop {
				display: flex;
				justify-content: space-between;
				margin-bottom: 14rpx;

				.content_js {
					color: var(--titleFontColor);
					font-weight: 600;
					line-height: 44rpx;
					font-size: 32rpx;
				}

				.editTxt {
					background-color: #faeee4;
					padding: 10rpx 20rpx;
					border-radius: 8rpx;
					color: #bf8355;
				}
			}
		}

		.banner_box {
			padding: 40rpx;

			>view {
				width: 100%;

				.img_box {
					width: 460rpx;
					height: 278rpx;
					background-color: var(--controllerBgColor);
					border-radius: 8rpx;
					margin-bottom: 20rpx;

					.banner_img {
						width: 460rpx;
						height: 278rpx;
						border-radius: 8rpx;
					}

					.add-pic {
						width: 32rpx;
					}
				}

				>text {
					color: #acb4c7;
					line-height: 28rpx;
				}
			}
		}
	}
</style>